<template>
    <view v-if="showLoading" class="w-full h-[100vh] flex items-end justify-center bg-[#000]">
        <!-- <image class="w-full" src="/static/welcome.gif" mode="widthFix" /> -->
        <image class="w-full" src="https://zyjy.ink/Uploads/20250315/da9c9c72c0faab7c94bb0dade1bd9644.gif" mode="widthFix" />
    </view>

    <view v-else>
        <view class="w-full h-[750rpx] bg-[red] pos-relative">
            <image class="w-full h-[750rpx] absolute left-0 top-0" :src="goods?.image" mode="aspectFill" />

            <swiper
                class="swiper w-[320rpx] h-[42rpx] bg-[#343a40]/70 rounded-md px-2 py-1 m-2 text-white top-2 left-2 z-2 absolute"
                circular
                :indicator-dots="indicatorDots"
                :autoplay="true"
                :interval="2000"
                :duration="500"
                vertical
            >
                <swiper-item v-for="(item, i) in fake" :key="i">
                    <view class="swiper-item uni-bg-red">{{ item.text }}</view>
                </swiper-item>
            </swiper>
        </view>

        <view class="rounded-md shadow-sm bg-white p-4 m-2 flex gap-2">
            <view class="w-[150rpx] h-[150rpx] flex justify-center items-center">
                <image class="w-full h-full rounded-md bg-blueGray" :src="goods?.image" mode="aspectFill" />
            </view>
            <view class="flex flex-1 flex-col gap-2">
                <view class="text-[34rpx] text-[#333] font-bold">
                    {{ goods?.title }}
                </view>
                <view class="text-[20rpx] flex gap-1 flex-wrap">
                    <view
                        v-for="tag in goods?.tags.split(',')"
                        class="inline-block text-[24rpx] text-[red] border-[1px] border-[red] border-dashed rounded-md px-2 py-1 mr-2"
                    >
                        {{ tag }}
                    </view>
                </view>
            </view>
        </view>

        <view class="rounded-md shadow-sm bg-white p-4 m-2">
            <FormG :goods-id="goods?.id || 0" />
        </view>

        <rich-text class="commodity_des" :nodes="goods?.content"></rich-text>

        <view class="rounded-md shadow-sm bg-white p-4 m-2">
            <FormG :goods-id="goods?.id || 0" />
        </view>

        <!-- 返回顶部 -->
        <view class="fixed bottom-0 right-0 m-4 flex justify-center items-center">
            <view
                class="bg-blue-600 text-white rounded-full shadow-lg active:bg-[blue]/70 transition duration-300 ease-in-out w-10 h-10 flex justify-center items-center"
                @click="top"
            >
                <uni-icons type="arrow-up" size="32" color="#fff" />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import FormG from "./Form.vue";
import { fake } from "./data";

interface Good {
    id: number;
    image: string | null;
    title: string | null;
    tags: string | null;
    price: number | null;
    content: string | null;
    createtime: number | null;
    updatetime: number | null;
}

const goods = ref<Good>();

const showLoading = ref(true);
setTimeout(() => {
    showLoading.value = false;
}, 2000);

onLoad((options: any) => {
    const { id } = options;
    uni.request({
        url: "/api/submit/getGoodsInfo",
        data: { id },
        method: "GET",
        success: ({ data }: any) => {
            if (data.code === 200) {
                goods.value = data.data;
            }
        },
        fail: (err) => {
            console.error("Request failed:", err);
        }
    });
});

function top() {
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
    });
}
</script>

<style lang="scss">
page {
    background: #f5f5f5;
}
.commodity_des [src] {
    max-width: 100%;
    height: auto;
}
.commodity_des [alt] {
    max-width: 100%;
    height: auto;
}
</style>
